<template>
  <div style="padding: 4px">
    <el-row class="display">
      <el-col>
        <div class="expression" v-html="expression"></div>
      </el-col>
      <el-col>
        <div class="result" v-html="result"></div>
      </el-col>
    </el-row>
    <el-row :gutter="4" v-for="(items,index) in buttons">
      <template v-for="(item,idx) in items">
        <el-col v-if="index===9&&idx===2" :span="12" style="margin-top: 4px">
          <el-button style="width: 100%" @click="exec" >{{ item }}</el-button>
        </el-col>
        <el-col v-else :span="6" style="margin-top: 4px">
          <el-button style="width: 100%" @click="update(item)">{{ item }}</el-button>
        </el-col>
      </template>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {Buttons, Exec} from "../../../wailsjs/go/main/App";

const result = ref("")
const expression = ref("")
const buttonItem = ref<Array<string>>([])
const buttons = ref([])
onMounted(() => {
  Buttons().then((res => {
    buttons.value = res
  }))
})
const update = (exp: string) => {
  switch (exp) {
    case "AC":
      buttonItem.value = []
      result.value = ""
      break
    case "Del":
      if (buttonItem.value.length > 0) {
        buttonItem.value.pop()
      }
      break
    default:
      buttonItem.value.push(exp)
      break
  }
  expression.value = buttonItem.value.join("")
  console.log(buttonItem.value)
}
const exec = () => {
  Exec(expression.value).then(res => {
    result.value = res
  })
}
</script>

<style scoped>
.display{
  border-right: 1px solid #838383;
  border-bottom: 1px solid #838383;
  border-left: 3px solid #606060;
  border-top: 3px solid #606060;
  padding: 2px;
}
.expression {
  width: 100%;
  height: 30px;
  line-height: 24px;
  white-space: nowrap;
  color: black;
  text-align: right;
  font-size: 16px;
  overflow: auto;
  font-weight: bold;
}

.result {
  width: 100%;
  height: 30px;
  line-height: 24px;
  white-space: nowrap;
  color: black;
  text-align: right;
  font-size: 24px;
  overflow: auto;
  font-weight: bold;
}
:deep(.el-button){
  font-weight: bold;
}
</style>